<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="oss/oss_include :: layui-css" />
    <th:block th:include="oss/oss_include :: common-css" />
</head>
<body class="gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse" style="padding: 0">
                <div class="layui-container" style="padding-top: 15px;padding: 0">
                    <div class="layui-card">
                        <div class="layui-card-header">当前位置：<span id="tvFP">/</span></div>
                        <div class="layui-card-body">
                            <div class="btnDiv">
                                <button id="btnBack" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"><i
                                        class="layui-icon">&#xe65c;</i>返回上级
                                </button>
                                <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"><i
                                        class="layui-icon">&#xe669;</i>刷新
                                </button>
                                <button id="btnUpload" class="layui-btn layui-btn-sm layui-btn-normal icon-btn" shiro:hasPermission="oss:memory:upload"><i
                                        class="layui-icon">&#xe681;</i>上传文件
                                </button>
                                <button id="btnDilaog" class="layui-btn layui-btn-sm layui-btn-primary icon-btn" shiro:hasPermission="oss:memory:view"><i
                                        class="layui-icon">&#xe634;</i>弹窗选择
                                </button>
                                <button id="btnEdit" class="layui-btn layui-btn-sm layui-btn-primary icon-btn" shiro:hasPermission="oss:memory:config"><i
                                        class="layui-icon">&#xe634;</i>储存配置
                                </button>
                                <form class="layui-form" lay-filter="chooseOss">
                                <div class="layui-form-item " >
                                    <label class="layui-form-label" >储存选择</label>
                                    <div class="layui-input-block" th:with="type=${@dict.getType('oss_type')}" id="chooseBox">
                                        <input  type="radio" name="oss_used" th:each="dict : ${type}" th:title="${dict.dictLabel}" th:value="${dict.dictValue}"/>
                                    </div>
                                </div>
                                </form>
                            <div class="file-list">
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
        <!-- 下拉菜单 -->
        <div class="dropdown-menu dropdown-anchor-top-left" id="dropdownFile">
            <div class="dropdown-anchor"></div>
            <ul>
                <li><a id="open"><i class="layui-icon layui-icon-file"></i>&emsp;查看&emsp;</a></li>
                <li><a id="copy"><i class="layui-icon layui-icon-release"></i>&emsp;复制&emsp;</a></li>
                <li>
                    <a id="del" style="color: red !important;">
                        <i class="layui-icon layui-icon-delete" style="font-size: 19px;"></i>&nbsp;&nbsp;&nbsp;删除&emsp;
                    </a>
                </li>
            </ul>
        </div>
        <!-- 渲染模板 -->
        <script id="fileTpl" type="text/html">
            {{#  layui.each(d, function(index, item){ }}
            <div class="file-list-item" data-dir="{{item.fileType}}" data-key="{{item.key}}" data-url="{{item.filePath}}" data-name="{{item.fileName}}">
                <div class="file-list-img {{item.thumb?'media':''}}">
                    <img src="{{item.thumbPath}}" content="upgrade-insecure-requests"  />
                </div>
              <div class="file-list-name">{{item.fileName}}</div>
            </div>
            {{#  }); }}
            {{# if(d.length<=0){ }}
            <div class="list-empty">
                <i class="layui-icon layui-icon-face-surprised"></i>
                <div>没有文件</div>
            </div>
            {{# } }}
        </script>

    <th:block th:include="oss/oss_include::clipboard-js"/>
    <th:block th:include="oss/oss_include::config-js"/>
    <div th:include="include::footer"></div>
    <th:block th:include="oss/oss_include::layui-js"/>
        <script type="text/javascript" th:inline="javascript">
            var prefix = ctx+"oss";
            var configPrefix = ctx + "system/config";
            layui.use(['jquery', 'form','layer', 'element', 'upload', 'laytpl', 'util'], function () {
                var $ = layui.jquery;
                var layer = layui.layer;
                var element = layui.element;
                var upload = layui.upload;
                var laytpl = layui.laytpl;
                var form = layui.form;
                $(document).ready(function(){
                    var ossUsed=[[${@config.getConfigByKey('oss_used')}]];
                    $("input[name=oss_used][value="+ossUsed+"]").prop("checked",true);
                    form.render(); //更新全部
                });
                //选择配置
                form.on('radio()', function(data){
                   layer.load(2, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    });
                    $.post( configPrefix+"/updateByKey",{"oss_used":data.value},function (rs) {
                        location.reload();
                    });
                });

                // 配置编辑弹窗
                $('#btnEdit').click(function () {
                    layer.open({
                        type: 2,
                        title: '储存配置',
                        content:prefix+'/config',
                        area: ['600px', '700px'],
                        offset: '50px',
                        shade: .1,
                        fixed: false,
                        resize: false
                    });
                });
                // 渲染文件列表
                function renderList(path) {
                    if (!path) {
                        path = $('#tvFP').text();
                    }
                    layer.load(2);
                    //获取文件列表
                    $.get(prefix+'/list', {
                        'path': path
                    }, function (res) {
                        layer.closeAll('loading');
                        if (res.code == 200) {
                            //获取文件列表
                            for (var i = 0; i < res.datas.length; i++) {
                                if(res.datas[i].thumb==true){
                                    res.datas[i].thumbPath = res.datas[i].domain + res.datas[i].thumbPath;
                                }
                                else {
                                    res.datas[i].thumbPath =prefix+"/assets/images/fti/"+res.datas[i].contentType+".png";
                                }
                                res.datas[i].filePath =  res.datas[i].domain + res.datas[i].filePath;
                            }
                            laytpl(fileTpl.innerHTML).render(res.datas, function (html) {
                                $('.file-list').html(html);
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    });
                }
                //初始化文件列表
                renderList();

                // 上传文件事件
                upload.render({
                    elem: '#btnUpload',
                    url:prefix+'/upload',
                    choose: function (obj) {
                        layer.load(2);
                    },
                    done: function (res, index, upload) {
                        layer.closeAll('loading');
                        if (res.code != 200) {
                            layer.msg(res.msg, {icon: 2});
                        } else {
                            layer.msg(res.msg, {icon: 1});
                            var fi=res.data.key;
                            /*设置路径*/
                            $('#tvFP').text(fi.substring(0,fi.lastIndexOf("/")));
                            renderList();
                        }
                    },
                    error: function () {
                        layer.closeAll('loading');
                        layer.msg('上传失败', {icon: 2});
                    },
                    accept: 'file'
                });

                // 刷新
                $('#btnRefresh').click(function () {
                    renderList();
                });
                //文件实际路径
                let mUrl;
                //文件key
                let mkey;
                // 列表点击事件
                $('body').on('click', '.file-list-item', function (e) {
                    var isDir = $(this).data('dir');
                    var name = $(this).data('name');
                    mUrl = $(this).data('url');
                    mkey = $(this).data('key')
                    $('#copy').attr('data-clipboard-text', mUrl);
                    if (isDir) {
                        var cDir = $('#tvFP').text();
                        cDir += (cDir == '/' ? name : ('/' + name));
                        $('#tvFP').text(cDir);
                        renderList(cDir);
                    } else {
                        var $target = $(this).find('.file-list-img');
                        $('#dropdownFile').css({
                            'top': $target.offset().top + 90,
                            'left': $target.offset().left + 25
                        });
                        $('#dropdownFile').addClass('dropdown-opened');
                        if (e !== void 0) {
                            e.preventDefault();
                            e.stopPropagation();
                        }
                    }
                });

                // 返回上级
                $('#btnBack').click(function () {
                    var cDir = $('#tvFP').text();
                    if (cDir == '/') {
                        // layer.msg('已经是根目录', {icon: 2})
                    } else {
                        cDir = cDir.substring(0, cDir.lastIndexOf('/'));
                        if (!cDir) {
                            cDir = '/';
                        }
                        $('#tvFP').text(cDir);
                        renderList(cDir);
                    }
                });

                // 点击空白隐藏下拉框
                $('html').off('click.dropdown').on('click.dropdown', function () {
                    $('#copy').attr('data-clipboard-text', '');
                    $('#dropdownFile').removeClass('dropdown-opened');
                });

                // 打开
                $('#open').click(function () {
                    window.open(mUrl);
                });
                // 删除
                $('#del').click(function () {
                    layer.confirm('确定要删除此文件吗？', function () {
                        layer.load(2);
                        $.get(prefix+'/delete'+mkey, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.msg(res.msg, {icon: 1});
                                renderList();
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        });
                    });
                });
                // 复制
                var clipboard = new ClipboardJS('#copy');
                clipboard.on('success', function (e) {
                    e.clearSelection();
                    layer.msg('文件地址已复制', {icon: 1});
                });
                clipboard.on('error', function (e) {
                    layer.msg('复制失败，请手动复制', {icon: 2});
                });

                // 弹窗模式
                $('#btnDilaog').click(function () {
                    layer.open({
                        type: 2,
                        title: '选择文件',
                        content:prefix+'/alert?multi=true&a=3',
                        area: ['600px', '420px'],
                        offset: '50px',
                        shade: .1,
                        fixed: false,
                        resize: false,
                        end: function () {
                            if (typeof(mFsUrls) != "undefined" && mFsUrls.length > 0) {
                                layer.msg('你选择了：' + JSON.stringify(mFsUrls), {icon: 1});
                                mFsUrls = undefined;
                            }
                        }
                    });
                });

                //
                $('#aMY').on('mouseenter', function () {
                    layer.tips('前往码云查看', this, {tips: [1, '#333333'], time: -1});
                }).on('mouseleave', function () {
                    layer.closeAll('tips');
                });
            });
        </script>
</body>
</html>